<template>
    <footer>
        <router-link exact active-class="active" v-for="(item,index) in tabs"
            v-bind:key="item.id" :to="{path: item.path}">
            <span :class="['icon', `icon${index+1}`]"></span>
            <p>{{ item.text }}</p>
        </router-link>
    </footer>
</template>

<script>
export default {
    data(){
        return {
            tabs: [
                {
                    id:1,
                    text:'首页',
                    path:'/home'
                },
                {
                    id:2,
                    text:'搜索',
                    path:'/search'
                    
                },
                {
                    id:3,
                    text:'收藏',
                    path:'/collection'
                },
                {
                    id:4,
                    text: '我的',
                    path:'/my'
                },
            ]
        }
    }
}
</script>
<style lang="less" scoped>
@import "../static/less/variable.less";
footer {
    width: 100%;
    height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: @pad;
    background-color: #fff;
    box-shadow: 0px -1px 2px #ccc;
    display: flex;
    align-items: center;
   
    .icon {
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 28px;
        background-position: 0 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-clip: border-box;
        background-origin: border-box;
    }
    p {
        color: #A6A6A6;
    }
    .icon1{
        background-image: url(../static/images/icons/i-home.png);
    }
    .icon2{
        background-image: url(../static/images/icons/i-search.png);
    }
    .icon3{
        background-image: url(../static/images/icons/i-collection.png);
    }
    .icon4{
        background-image: url(../static/images/icons/i-profile.png);
    }

    a {
        flex-grow: 1;
        text-decoration: none;
        text-align: center;
        font-size: 14px;
        color: #666;
        
        &.active {
            .icon1{
                background-image: url(../static/images/icons/i-home-on.png);
            }
            .icon2{
                background-image: url(../static/images/icons/i-search-on.png);
            }
            .icon3{
                background-image: url(../static/images/icons/i-collection-on.png);
            }
            .icon4{
                background-image: url(../static/images/icons/i-profile-on.png);
            }
            p {
                color: @color;
            }
        }
    }
}
</style>